<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header">
          <div class="title">欢迎使用智慧养老系统</div>
          <div class="user">
            <el-dropdown>
              <span class="el-dropdown-link">
                <img src="/public/默认头像-医生男.svg" alt="个人中心" />
                <span>{{ loginInfo!.realName }}</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="showPersonalDialogVisible">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="16vw" style="--el-aside-width: 10vw;">
          <div class="aside">
            <el-col>
              <el-menu default-active="日常数据录入" class="el-menu-vertical-demo":unique-opened=true>
                <el-sub-menu :index="String(catalogIndex)" v-for="(catalog, catalogIndex) in catalogList"
                  :key="catalogIndex">
                  <template #title>
                    <el-icon>
                      <document />
                    </el-icon>
                    <span>{{ catalog.name }}</span>
                  </template>
                  <el-menu-item :index="subCatalog" v-for="(subCatalog, subCatalogIndex) in catalog.subCatalog"
                    :key="subCatalogIndex" @click="handleItemClick(subCatalog)">{{ subCatalog }}</el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </div>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="positionTop">
              <div class="line"></div>
            </div>
            <div class="workPlace">
              <RouterView />
            </div>
            <!-- 个人信息修改弹窗 -->
            <div class="personalDialog">
              <personal :openPersonalDialogVisible="personalDialogVisible"
                @updatePersonalDialogVisible="updatePersonalDialogVisible"
                @comfirmPersonalDialogVisible="comfirmPersonalDialogVisible"></personal>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import personal from "@/components/personal.vue";
import { ElMessage } from 'element-plus'

// 获取登录信息
import { useLoginStore } from "@/stores/login";
const loginStore = useLoginStore();
const loginInfo: Record<string, any> | null = loginStore.loginInfo
// 列表目录
const catalogList = ref([
  {
    name: "健康管理",
    subCatalog: ["日常数据录入"],
  },
  {
    name: "档案管理",
    subCatalog: ["入住登记", "档案修改", "缴费详情"],
  },

  {
    name: "日常管理",
    subCatalog: ["活动安排"],
  },
  {
    name: "宿房管理",
    subCatalog: ["床位分配",
    //  "床位状态可视化"
    ]
  },
  {
    name: "权限管理",
    subCatalog: ["员工管理"],
  },
]);
const activeIndex = ref('日常数据录入');
const handleItemClick = (index: string) => {
  console.log("点击", index);
  activeIndex.value = index;

  if (index === '日常数据录入') {
    router.push({
      path: '/dailyData'
    })
  } else if (index === "入住登记") {
    router.push({
      path: '/checkIn'
    })
  } else if (index === "档案修改") {
    router.push({
      path: '/fileUpdate'
    })
  } else if (index === "缴费详情") {
    router.push({
      path: '/payment'
    })
  } else if (index === "活动安排") {
    router.push({
      path: '/activityArrangement'
    })
  } 
  // else if (index === "护理日志") {
  //   router.push({
  //     path: '/nursingLog'
  //   })
  // } 
  else if (index === '床位分配') {
    router.push({
      path: '/bedManagement'
    })
  }
  //  else if (index === '床位状态可视化') {
  //   router.push({
  //     path: '/bedStatus'
  //   })
  // } 
  else if (index === '员工管理') {
    //前置守卫判断身份是admin还是staff，前者放行，后者不放
    if (loginInfo!.userType === 'staff') {
      ElMessage.error('您没有权限访问该页面！');
      return;
    } else {
      router.push({
        path: '/staffManagement'
      })
    }


  }
}
// 个人信息修改弹窗
const personalDialogVisible = ref(false);
const showPersonalDialogVisible = () => {
  personalDialogVisible.value = true;
  console.log("父组件", personalDialogVisible.value);
}
const updatePersonalDialogVisible = () => {
  personalDialogVisible.value = false;
}
const comfirmPersonalDialogVisible = () => {
  personalDialogVisible.value = false;
}
//退出登录
const logout = () => {
  loginStore.clearLoginInfo();
  router.push({
    path: '/login'
  })
}

</script>

<style lang="less" scoped>
.el-header {
  --el-header-height: 7vh;
  background-image: linear-gradient(to right, #d26edd, #92b6f5);
  position: fixed;
  /* 使头部固定 */
  top: 0;
  /* 固定在页面顶部 */
  left: 0;
  /* 距离左边0 */
  width: 100%;
  /* 宽度填满页面 */
  z-index: 1000;

  /* 确保头部在其他元素之上 */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--el-header-height);
    padding: 0 20px;
    /* 给左右加点内边距，避免紧贴屏幕 */
  }

  .title {
    font-size: 2em;
    color: #fff;
    font-weight: bold;
  }

  .user {
    display: flex;
    align-items: center;

    .el-dropdown-link {
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }

      span {
        margin-left: 0.5vw;
      }
    }
  }
}

.aside {
  position: fixed;
  width: 10vw;
  height: 100vh;
  background-image: linear-gradient(to right, #d26edd, #92b6f5);
  margin-top: 7vh;
  //溢出的部分隐藏
  overflow: hidden;

}

.el-main {
  margin-top: 7vh;
  --el-main-padding: 0 1vw 1vh 1vw;

  .main {
    display: flex;
    flex-direction: column;

    .positionTop {

      .line {
        position: fixed;
        margin-top: 2px;
        width: 100%;
        height: 0.2vh;
        background-image: linear-gradient(to right, #d26edd, #92b6f5);
        z-index: 9999;
      }
    }


    .workPlace {
      //   background-color: #e7cccc5e;
      margin-top: 3px;
      width: 88vw;
      height: 90vh;
    }
  }
}
</style>